<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //表格,当年表格比较流行,所以表格有许多简便的操作,例如不需要通过getEleXxx而是直接rows获取所有行

        window.onload = function () {
            let oTab = document.getElementById('table1');

            //如果需要获取表中某行或者某单元格的内容,可以不需要通过getEleByXxx
            console.log(oTab.rows.length);              //5;因为没有指定仅tbody,所以会计算包含表头的数量

            let oRows = oTab.tBodies[0].rows;
            console.log(oRows.length);                  //4;通常对表格操作最好添加tBodies防止此类错误

            let orders = oRows.length;                  //当前表格的总记录条数,用于后面的视图刷新

            //几个关于表格练习
            //1.通过模2来让表格产生间隔染色背景的效果     //后续增删表格都需要刷新视图,因此写为函数
            function show() {
                oTab = document.getElementById('table1');   //刷新table
                oRows = oTab.tBodies[0].rows;               //刷新rows
                for (let i = 0; i < oRows.length; i++) {
                    if (!(i % 2)) { //1==true,0=false,所以可以简写
                        oRows[i].style.background = 'beige';
                    }else oRows[i].style.background = '';

                    //2.当鼠标移入时高亮
                    let oldBG = oRows[i].style.background;  //记忆原来的背景色,方便移出时还原

                    oRows[i].onmouseenter = function () {
                        oRows[i].style.background = 'pink';
                    };

                    oRows[i].onmouseleave = function () {
                        oRows[i].style.background = oldBG;
                    }
                }
            }
            show();

            //3.添加1条记录
            let oBtn1 = document.getElementById('btn1');
            oBtn1.onclick = function () {
                let oTxt1 = document.getElementById('txt1');
                let oTxt2 = document.getElementById('txt2');

                //需要创建tr来存放各自的td
                let oTr = document.createElement('tr');


                //第1列,let没办法重复定义...
                let oTd1 = document.createElement('td');
                oTd1.innerHTML = orders+1;
                oTr.appendChild(oTd1);   //通过tr将子节点添加

                //第2列
                let oTd2 = document.createElement('td');
                oTd2.innerHTML = oTxt1.value;
                oTr.appendChild(oTd2);

                //第3列
                let oTd3 = document.createElement('td');
                oTd3.innerHTML = oTxt2.value;
                oTr.appendChild(oTd3);

                //第4列,并在创建时添加点击删除的函数
                let oTd4 = document.createElement('td');
                oTd4.innerHTML = '<a href = "javascript:void(0);">删除</a>';
                oTd4.children[0].onclick = function() {
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                    show();
                };
                oTr.appendChild(oTd4);

                //最后将tr添加
                oTab.tBodies[0].appendChild(oTr);

                orders++;   //刷新总记录数
                oTxt1.value = '';   //清空input
                oTxt2.value = '';
                show();     //刷新视图
            };

            //4.(初始化)删除记录(新创建的删除a标签需要卸载)
            let aA = document.getElementsByTagName('a');
            for (let i = 0; i < aA.length; i++) {
                aA[i].onclick = function () {
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                    show();
                }
            }

            //已修复的bug:
            //无法删除新创建的行 → 因为删除行的方法在函数只在函数初始化时添加了,需要额外在创建第四列时让td中的a标签添加此删除函数
            //删除行后不再有隔行变色的效果 → 因为没刷新视图,或者没写else的内容导致刷新视图时只会刷新有颜色的部分
            //删除行后鼠标移入变色效果会错行 → 因为没有刷新视图,导致鼠标移入的行与rows[i]并不一致

        }


        //其他补充(因为表格现在太常用,仅作笔记不做演示)
        //表格的搜索:实质是循环遍历表格中的单元格然后search
        //字符串的搜索功能search:类似java的contain,没有则返回-1  console.log('abcd'.search('c')); //2;
        //单元格的排序功能:实质是通过ul.appendChild(li)可以做到移动(并删除原来的位置的元素,隐藏的)功能,因此先对表格进行排序,然后执行append即可

        //表单的提交(简单的介绍)
        //表单提交时存在 onsubmit 事件,oForm.onsubmit = func...
        //另外有个重置的事件 onreset

    </script>
</head>

<body>


<div>
    <input type = "text" id="txt1" placeholder="姓名...">
    <input type = "text" id="txt2" placeholder="年龄...">
    <input type = "button" id="btn1" value="添加">
</div>
<hr>
<div>

    <!-- 一个完整的表格的写法 -->
    <table border="1" width="500" id="table1">
        <!--表头t head-->
        <thead>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>

        </thead>

        <!--表身 t body,一般主要用这个-->
        <tbody>

        <!--
        一些永远记不住的缩写
        <td> 是table data cell 的缩写，单元格
        <tr> 是table row 的缩写，表格中的一行
        <th> 是table header cell 的缩写，表头单元格
        -->
        <tr>
            <td>1</td>
            <td>狗蛋</td>
            <td>14</td>
            <td><a href = "javascript:void(0);">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>大柱</td>
            <td>13</td>
            <td><a href = "javascript:void(0);">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>二妞</td>
            <td>11</td>
            <td><a href = "javascript:void(0);">删除</a></td>
        </tr>

        <tr>
            <td>4</td>
            <td>大栓</td>
            <td>13</td>
            <td><a href = "javascript:void(0);">删除</a></td>
        </tr>

        </tbody>

        <!-- 表脚 t foot -->
        <tfoot>

        </tfoot>

    </table>

</div>

</body>
</html>